<template>
<!-- 为Echars准备一个具备宽高的DOM -->
  <div class="dashboard-container">
    <!-- 面板统计组件 -->
    <panel-group  :userTotal="userTotal" :articleTotal="articleTotal" :questionTotal="questionTotal"/>
    <el-row :gutter="40">
      <el-col :xs="24" :sm="24" :lg="12">
        <el-card>
          <!-- 饼状图各技术文章统计 -->
          <pie-chart v-if="flag" :legendData="categortTotal.nameList" :seriesData="categortTotal.nameAndValueList" />
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <el-card>
          <!-- 注意：echarts在初始加载实例的时候就要拿到数据，有数据就会展示出来  -->
          <!-- 柱状图近六个月发布文章统计 monthArticleTotal-->
          <bar-chart v-if="flag" :xAxisData="monthArticleTotal.yearMonthList" :seriesData="monthArticleTotal.articleTotalList"/>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import PieChart from "./components/pieChart.vue"
import barChart from "./components/barChart.vue"
import PanelGroup from "./components/PanelGroup.vue"
import api from "@/api/home"
export default{
  name:"DashBoard",
  components:{
    PieChart,
    barChart,
    PanelGroup
  },
  data(){
    return {
      userTotal:0, //总用户
      articleTotal:0, //总文章
      questionTotal:0, //总提问
      categortTotal:{}, //每个分类下的文章数
      monthArticleTotal:{}, //查询近六个月发布的文章数
      flag:false //用来判断你是否显示图表组件

    }
  },
  mounted(){
    this.getTotal(),
    this.getArticleTotal()
  },
  methods:{
    //查询总用户
    async getTotal(){
      //总用户
      const {data:userTotal} = await api.getUserTotal()
      this.userTotal = userTotal
      //总文章
      const {data:articleTotal} = await api.getArticleTotal()
      this.articleTotal = articleTotal
      //总问题数
      const {data:questionTotal} = await api.getQuestionTotal()
      this.questionTotal = questionTotal
    },
    //统计个技术频道文章数和近六个月发布的文章数
    async getArticleTotal(){
      //统计各频道文章数
      const {data:categortTotal} = await api.getCategoryTotal()
      this.categortTotal = categortTotal

      //近6个月文章数
      const {data:monthArticleTotal} = await api.getArticleTotal()
      this.monthArticleTotal = monthArticleTotal
      //查询到数据后再加载图表组件，将数据渲染
      this.flag = true
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
